<template>
  <div class="cart-list">
    <div v-for="(brand, index) in brands" :key="index" class="brand-container">
      <h3 v-if="brand.brandId == 1">店铺名: 荣耀店铺</h3>
      <h3 v-if="brand.brandId == 2">店铺名: 华为店铺</h3>
      <h3 v-if="brand.brandId == 3">店铺名: 小米店铺</h3>
      <h3 v-if="brand.brandId == 4">店铺名: oppo店铺</h3>
      <h3 v-if="brand.brandId == 5">店铺名: viov店铺</h3>
      <ul>
        <li v-for="(cartItem, cartIndex) in brand.carts" :key="cartItem.id" class="cart-item">
          <span>{{ cartItem.id }}</span>
          <span>{{ cartItem.shopsName }}</span>
          <!-- 这里可以添加更多信息，比如商品名称、价格等，但你的数据结构中未提供这些信息 -->
          <span>¥{{ cartItem.price }}</span>
          <span>
            <el-input-number v-model="cartItem.number" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {listShopping} from "@/api/goods/shopping";

export default {
  data() {
    return {
      brands: [] // 用于存储从后端获取的品牌和购物车信息
    };
  },
  created() {
    this.getList(); // 在组件创建时获取数据
  },
  methods: {
    getList() {
      listShopping().then(response => {
        console.log('查询新购物车列表', response)
        this.brands = response
      });
    },
  }
};
</script>

<style scoped>
.cart-list {
  padding: 20px;
}
.brand-container {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}
.cart-item {
  list-style: none;
  margin-bottom: 10px;
}
</style>
